<template>
  <div id="container">
    <!--图表容器-->
    <div id="newCharts"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  export default {
    name: "example",
    data() {
      return {
        formatter: '￥{value}',
      }
    },
    props: {
      xData: {
        type: Array,
        require: true
      },
      sData: {
        type: Array,
        require: true
      }
    },
    mounted() {
      this.showCharts();
    },
    methods: {
      // 展示折线图
      showCharts() {
        let serverData = [];
        this.sData.forEach(element => {
          let val = []
          this.xData.forEach(elm => {
            if (element.dj[elm]) {
              val.push(element.dj[elm].length)
            } else {
              val.push(0)
            }
          });
          serverData.push({
            name: element.pcs.pcsName,
            type: 'bar',
            label: {
              show: true
            },
            barWidth: 5,
            stack: element.pcs.xsq.xsqName,
            emphasis: {
              focus: 'series'
            },
            data: val
          })
        });
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('newCharts')); //也可以通过$refs.newCharts的方式去获取到dom实例。
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.xData,
          }],
          yAxis: [{
            type: 'value'
          }],
          series: serverData,

          // [{
          //     name: 'Direct',
          //     type: 'bar',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [320, 332, 301, 334, 390, 330, 320]
          //   },
          //   {
          //     name: 'Email',
          //     type: 'bar',
          //     stack: 'Ad',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [120, 132, 101, 134, 90, 230, 210]
          //   },
          //   {
          //     name: 'Union Ads',
          //     type: 'bar',
          //     stack: 'Ad',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [220, 182, 191, 234, 290, 330, 310]
          //   },
          //   {
          //     name: 'Video Ads',
          //     type: 'bar',
          //     stack: 'Ad',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [150, 232, 201, 154, 190, 330, 410]
          //   },
          //   // {
          //   //   name: 'Search Engine',
          //   //   type: 'bar',
          //   //   data: [862, 1018, 964, 1026, 1679, 1600, 1570],
          //   //   emphasis: {
          //   //     focus: 'series'
          //   //   },
          //   //   markLine: {
          //   //     lineStyle: {
          //   //       type: 'dashed'
          //   //     },
          //   //     data: [
          //   //       [{
          //   //         type: 'min'
          //   //       }, {
          //   //         type: 'max'
          //   //       }]
          //   //     ]
          //   //   }
          //   // },
          //   {
          //     name: 'Baidu',
          //     type: 'bar',
          //     barWidth: 5,
          //     stack: 'Search Engine',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [620, 732, 701, 734, 1090, 1130, 1120]
          //   },
          //   {
          //     name: 'Google',
          //     type: 'bar',
          //     stack: 'Search Engine',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [120, 132, 101, 134, 290, 230, 220]
          //   },
          //   {
          //     name: 'Bing',
          //     type: 'bar',
          //     stack: 'Search Engine',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [60, 72, 71, 74, 190, 130, 110]
          //   },
          //   {
          //     name: 'Others',
          //     type: 'bar',
          //     stack: 'Search Engine',
          //     emphasis: {
          //       focus: 'series'
          //     },
          //     data: [62, 82, 91, 84, 109, 110, 120]
          //   }
          // ]
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  #container {
    width: 100%;
    height: 100vh;
    padding-top: 100px;

    #newCharts {
      margin: 0 auto;
      height: 800px;
    }
  }

</style>
